﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>每日任务</title>
    {include file='common/header'}
    <link href="/static/home/mobile/css/reset_5.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/new_style.css" rel="stylesheet" type="text/css"/>
    <style>
body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: "Helvetica Neue",Helvetica,sans-serif;
    font-size: .85rem;
    line-height: 1.5;
    color: #3d4145;
    background: #eee;
    overflow: hidden;
}
 .content{
        top:0;
        background: url('/static/home/mobile/images/ranking-background.jpg');
        background-size: 100% 100%;
        height:calc(100% - 47px);
    }
    
	.top {
	    margin-top: 47px;
	    padding: 1rem 2rem;
	    position: relative;
	}
.top .tit {
    width: 100%;
    display: block;
    margin-left: .3rem;
}

.top .date {
    text-align: center;
    font-size: 1.95rem;
    color: rgb(238, 255, 170);
    padding-top: .6rem;
}


.top .str {
    text-align: center;
    font-size: 1.7rem;
    color: #fff;
    padding-top: .3rem;
}

.top .but {
    width: 7rem;
    margin: 0 auto;
    margin-top: .5rem;
    font-size: .8rem;
    padding: .3rem;
    color: #fff;
    background-image: linear-gradient(to top,#FF716F,#FF4E60);
    background-color: #FF716F;
    text-align: center;
    border-radius: 2rem;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
    display: none;
}

 .daily_task .list-box {
    margin: 1rem;
    margin-top: 0rem;
    background: #131313;
    border-radius: 2px;
    padding: 0;
}

 .task-list.active {
    display: block;
}
.text {
    text-align: center;
    color: red;
    font-size: .75rem;
    margin-bottom: .4rem;
}
.list-block {
    margin: 1.75rem 0;
    font-size: .85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block li {
    box-sizing: border-box;
    position: relative;
    background: #1a1a1a;
    border-bottom: 2px solid #000;
}
.list-block .item-content {
    box-sizing: border-box;
    padding-left: 1.75rem;
    min-height: 3.2rem;
    display: flex;

    justify-content: space-between;

    align-items: center;
    padding-left: 0;
}
.list-block.media-list .item-media {
    display: block;
    text-align: right;
}
.list-block.media-list .item-media {
    padding-top: .45rem;
    padding-bottom: .5rem;
}

.task-list .order {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(/static/home/mobile/images/order.png);
    background-size: 100%;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 2.2em;
    font-weight: 700;
}

.list-block.media-list .item-inner {
    display: block;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    -webkit-align-self: stretch;
    align-self: stretch;
    margin-left: .75rem;
}

.list-block .item-inner {
    padding-right: .75rem;
    position: relative;
    width: 100%;
    padding-top: .4rem;
    padding-bottom: .35rem;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-title-row {
font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    line-height: 2.5rem;
}
.list-block .item-media+.item-inner {
    margin-left: 1.75rem;
}
.list-block.media-list .item-title {
    font-weight: 500;
    color: #fff;
}
.list-block .item-title {

    flex-shrink: 1;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.task-list.list-block .item-subtitle.sub {
    color: #999;
    font-size: 1rem;
}
.list-block .item-subtitle {
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    line-height:2rem;
}
.daily_task .task-list {
    background: #131313;
    padding: 1.3rem 1.5rem;
    margin: 0 .5rem;
    border-radius: .1rem;
    min-height: initial;

}
.task-list .red2 {
    color: #fc7946;
    font-weight: 600;
    font-size: 1rem;
}
.task-list .progress-box {
    display: flex;
}
.list-block .item-subtitle {
    font-size: .75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
 .task-list .progress {
    flex-grow: 10;
    background: #f5f5f5;
    border-radius: 2rem;
    height: 0.8rem;
    overflow: hidden;
    margin: 0.6rem 0.6rem 0 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.task-list .progress .progress-bar {
    background-image: linear-gradient(to right,#FF8B07,#FF4F00);
}
.task-list .progress-box .a {
    color: #FF8B07;
    font-size: .6rem;
    flex-grow: 1;
}
.list-block.media-list .item-media {
    padding-top: .45rem;
    padding-bottom: .5rem;
}
.list-block.media-list .item-media {
    padding-top: .45rem;
    padding-bottom: .5rem;
}
.task-list .qwc {
    margin-right: .5rem;
    display: inline-block;
}

.button.button-round {
    border-radius: 1.25rem;
    color: #2d80ff;
}
.button {
    border: 1px solid #0894ec;
    color: #f60;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: 50%;
    line-height: 3rem;
    box-sizing: border-box;

    appearance: none;
    background: 0 0;
    padding: 0 1.5rem;
    margin: 0;
    height: 3rem;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-size: 1.5rem;
    font-family: inherit;
    cursor: pointer;
}
.button-warning {
    border-color: #2d80ff;
    color: #2d80ff;
}
.item-media a{ color: #f60;}
.sub_text {
    font-size: 1rem;
    color: #fff;
}
.site-header{
	 background: url('/static/home/mobile/images/ranking-background.jpg');
}
.task-list .progress .progress-bar {
    background-image: linear-gradient(to right,#FF8B07,#FF4F00);
    height:0.8rem;
}
    </style>
</head>
<body class='daily_task'>
    <div class="site-header header-fixed">
        <a onclick="history.back()" class="back"></a>
        <div class="tit-name">每日任务</div>
    </div>



<div class="content native-scroll"><!----> 

<div class="top"><img src="/static/home/mobile/images/ranking-top2.png" alt="" class="tit"> <div class="date">
                    活动倒计时：<span id="left_time"></span>
                </div> <div class="str">
                    每日完成任务，就可获得奖励
                </div> <div class="but">
                    接单排行榜
                </div>
 
                	</div> 
                	
                	
                	
                	<div class="list-box">
                	
                			<div class="list-block media-list task-list active">
                				<div class="text" style="display: none;">每日完成38个任务，可领取全部奖励</div>
                				<ul> 
                				<li><div class="item-content">
                					<div class="item-media">
                						<span class="order">1</span>
                					</div> 
                					<div class="item-inner">
                						<div class="item-title-row">
                							<div class="item-title">完成3个任务</div>
                						</div> 
                						<div class="item-subtitle sub">
                                        额外奖励 <span class="red2">+0.20</span> 元                                    </div> 
                                        {php}
                                        
                                        $percent_3=($count/3)*100;
                                       
                                        if($percent_3>100){
                                        	$percent_3=100;
                                        	$done_3=3;
                                        }else{
                                    		$done_3=$count;    	
                                        }
                                        
                                        {/php}
                                        <div class="item-subtitle progress-box">
                                        	<div class="progress">
                                        		<div class="progress-bar" style="width: {$percent_3}%;">
                                        			
                                        		</div>
                                        	</div> 
                                        
                                        <div class="a">
                                            {$done_3}/3
                                        </div>
                                        </div>
                                        </div>
                                        <div class="item-media">
                                        	{if condition="$count lt 3"}
                                        	<a href="/home/task/index" class="button button-warning button-round qwc">去完成</a> 
                                        	{elseif condition="$count egt 3 && !$task_3"}
                                        	
                                        	<a href="javascript:;" onclick="get_reward('task_3')" class="button button-warning button-round qwc">领取</a>
                                        	
                                        	{elseif condition="$task_3"}
                                        	<a href="javascript:;" class="button button-warning button-round qwc">已完成</a>
                                        	{/if}
                                        </div>
                                        </div>
                                </li>
                                
                                        {php}
                                        
                                        $percent_6=($count/6)*100;
                                       
                                        if($percent_6>100){
                                        	$percent_3=100;
                                        	$done_6=6;
                                        }else{
                                    		$done_6=$count;    	
                                        }
                                        
                                        {/php}                                
                                
                                
                                
                                
                                        <li>
                                        	<div class="item-content"><div class="item-media"><span class="order">2</span></div> <div class="item-inner"><div class="item-title-row"><div class="item-title">再完成3个任务</div></div> <div class="item-subtitle sub">
                                        额外奖励 <span class="red2">+0.30</span> 元                                    
                                        </div> 
                                        
                                        <div class="item-subtitle progress-box">
                                        	
                                        	{if condition="$count lt 3"}
                                        	<span class="sub_text">请先完成上面的任务</span>
                                        	{else /}
                                        	<div class="progress">
                                        		<div class="progress-bar" style="width: {$percent_6}%;">
                                        			
                                        		</div>
                                        	</div>
                                        	
	                                        	<div class="a">
	                                            {$done_6}/6
	                                        	</div>
                                        	{/if}
                                        	
                                        	
                                        	</div>
                                       </div>
                                        	
                                        	<div class="item-media">
                                        		{if condition="$count lt 6"}
                                        	<a href="/home/task/index" class="button button-warning button-round qwc">去完成</a> 
                                        	{elseif condition="$count egt 6 && !$task_6"}
                                        	
                                        	<a href="javascript:;" onclick="get_reward('task_6')" class="button button-warning button-round qwc">领取</a>
                                        	
                                        	{elseif condition="$task_6"}
                                        	<a href="javascript:;" class="button button-warning button-round qwc">已完成</a>
                                        	{/if}
                                        		
                                        	
                                        	</div>
                                        </li>
                                        
                                        {php}
                                        
                                        $percent_11=($count/11)*100;
                                       
                                        if($percent_11>100){
                                        	$percent_11=100;
                                        	$done_11=11;
                                        }
                                    	$done_11=$count;    	
                                        
                                        {/php}   
                                        
                                        <li><div class="item-content"><div class="item-media"><span class="order">3</span></div> <div class="item-inner"><div class="item-title-row"><div class="item-title">再完成5个任务</div></div> <div class="item-subtitle sub">
                                        额外奖励 <span class="red2">+0.50</span> 元                                    </div> 
                                        	
                                        	<div class="item-subtitle progress-box">
                                        	{if condition="$count lt 6"}
                                        	<span class="sub_text">请先完成上面的任务</span>
                                        	{else /}
                                        	<div class="progress">
                                        		<div class="progress-bar" style="width: {$percent_11}%;">
                                        			
                                        		</div>
                                        	</div> 
                                        	
                                        	<div class="a">
	                                            {$done_11}/11
	                                        	</div>
	                                        	
                                        	{/if}
                                        	
                                        	</div>
                                        	
                                        	</div>
                                        	
                                        	<div class="item-media">
                                        		
                                        			{if condition="$count lt 11"}
                                        	<a href="/home/task/index" class="button button-warning button-round qwc">去完成</a> 
                                        	{elseif condition="$count egt 11 && !$task_11"}
                                        	
                                        	<a href="javascript:;" onclick="get_reward('task_11')" class="button button-warning button-round qwc">领取</a>
                                        	
                                        	{elseif condition="$task_11"}
                                        	<a href="javascript:;" class="button button-warning button-round qwc">已完成</a>
                                        	{/if}
                                        	</div>
                                        	
                                        	</div>
                                        </li>
                                        


                                        {php}
                                        
                                        $percent_19=($count/19)*100;
                                       
                                        if($percent_19>100){
                                        	$percent_19=100;
                                        	$done_19=19;
                                        }
                                    	$done_19=$count;    	
                                        
                                        {/php}   


                                        <li><div class="item-content"><div class="item-media"><span class="order">4</span></div> <div class="item-inner"><div class="item-title-row"><div class="item-title">再完成8个任务</div></div> <div class="item-subtitle sub">
                                        额外奖励 <span class="red2">+1.00</span> 元                                    </div> <div class="item-subtitle progress-box">
                                        	
                                        	{if condition="$count lt 11"}
                                        	<span class="sub_text">请先完成上面的任务</span>
                                        	{else /}
                                        	<div class="progress">
                                        		<div class="progress-bar" style="width: {$percent_19}%;">
                                        			
                                        		</div>
                                        	</div> 
                                        	<div class="a">
	                                            {$done_19}/19
	                                        	</div>
                                        	{/if}
                                        	
                                        	</div></div> 
                                        	
                                        	<div class="item-media">
                                        	
                                        	{if condition="$count lt 11"}
                                        	<a href="/home/task/index" class="button button-warning button-round qwc">去完成</a> 
                                        	{elseif condition="$count egt 19 && !$task_19"}
                                        	
                                        	<a href="javascript:;" onclick="get_reward('task_19')" class="button button-warning button-round qwc">领取</a>
                                        	
                                        	{elseif condition="$task_19"}
                                        	<a href="javascript:;" class="button button-warning button-round qwc">已完成</a>
                                        	{/if}
                                        	
                                        	
                                        </div></div>
                                        </li>
                                        
                                        {php}
                                        
                                        $percent_31=($count/31)*100;
                                       
                                        if($percent_31>100){
                                        	$percent_31=100;
                                        	$done_31=31;
                                        }
                                    	$done_31=$count;    	
                                        
                                        {/php} 
                                        
                                        <li><div class="item-content"><div class="item-media"><span class="order">5</span></div> <div class="item-inner"><div class="item-title-row"><div class="item-title">再完成12个任务</div></div> <div class="item-subtitle sub">
                                        额外奖励 <span class="red2">+1.50</span> 元                                    </div> <div class="item-subtitle progress-box">
                                        	
                                        {if condition="$count lt 19"}
                                        	<span class="sub_text">请先完成上面的任务</span>
                                        	{else /}
                                        	<div class="progress">
                                        		<div class="progress-bar" style="width: {$percent_31}%;">
                                        			
                                        		</div>
                                        	</div> 
                                        	
                                        	<div class="a">
	                                            {$done_31}/31
	                                        	</div>
                                        	{/if}
                                        	
                                        	</div>
                                        	</div>
                                        	<div class="item-media">
                                        		
                                        	{if condition="$count lt 31"}
                                        	<a href="/home/task/index" class="button button-warning button-round qwc">去完成</a> 
                                        	{elseif condition="$count egt 31 && !$task_31"}
                                        	
                                        	<a href="javascript:;" onclick="get_reward('task_31')" class="button button-warning button-round qwc">领取</a>
                                        	
                                        	{elseif condition="$task_31"}
                                        	<a href="javascript:;" class="button button-warning button-round qwc">已完成</a>
                                        	{/if}
                                        	
                                        	
                                        </li>
                                        </ul>
                                        </div> 
                                        
                                      
                                		</div>
                                		</div>



    <script type="text/javascript">
    	function get_reward(type){
    			$.post(
                    '/home/task/get_reward',
                    {
                      type: type,
                    },
                    function (ret) {
	            		 message(ret.message,ret.redirect,ret.type);
                      console.log(ret)
                    },'json'
                );
    	}
    </script>
    <script>

            //抽奖倒计时
            function surplus_str(time) {

             
                var days = Math.floor(time/86400);
                var hour = Math.floor(time%86400/3600);
                var minute = Math.floor(time%3600/60);
                var second = time%3600%60;
                var str = '';

                if(days > 0)
                    str += days+'天';

                if(hour > 0)
                    str += (hour < 10 ? '0'+hour:hour)+'小时';
                else
                    str += '00小时';

                if(minute > 0)
                    str += (minute < 10 ? '0'+minute:minute)+'分';
                else
                    str += '00分';

                if(second > 0)
                    str += (second < 10 ? '0'+second:second)+'秒';
                else
                    str += '00秒';


                return str;
            }   

    
    
    
    var surplus="{$surplus}"
    	    //剩余时间
    setInterval(function(){

        if(surplus > 0){
            surplus--;
            console.log(surplus)
            var time_str=surplus_str(surplus)
            $('#left_time').html(time_str)
        }
        
        if(surplus == 0){
			setTimeout( function(){ window.location.reload() }, 1000);
        }

    }, 1000);
    
    </script>
</body>
</html>